<template>
  <el-calendar v-if="show" v-model="value">
    <template #dateCell="{ date, data }">
      <!-- 自定义日期显示的结构
      date 当前日期的时间对象
      data:object data.day 获取格式化完的日期
       -->
      <div class="date-content">
        <span class="text">{{ getDate(data.day) }}</span>
        <!-- 只有是周六日才显示 -->
        <span v-if="getDay(date)" class="rest">休息</span>
      </div>
    </template>
  </el-calendar>
</template>

<script>
export default {
  data () {
    return {
      value: new Date(),
      // 介入式销毁一个组件=》借助v-if特性
      show: true
    }
  },
  watch: {
    async '$i18n.locale' (newValue) {
      console.log('语言切换：', newValue)
      this.show = false
      // 销毁之后执行日历组件的重新创建=》$nextTick
      await this.$nextTick()
      this.show = true
    }
  },
  methods: {
    // 获取日子
    getDate (day) {
      return day.split('-')[2]
    },
    // 根据日期对象获取星期=》new Date().getDay() => 周一到周六（1-6）| 周日 (0)
    getDay (date) {
      // 获取星期几
      const day = date.getDay()
      // 周六或周日都显示休息
      return day === 6 || day === 0
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-calendar-day {
  height: 50px;
}
// 当前日期
::v-deep .el-calendar-table td.is-selected .text {
  background: #409eff;
  color: #fff;
  border-radius: 50%;
}
// 自定义内容样式
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
// 休息时间
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text {
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
}
</style>
